<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>学生 · 个人信息</title>
    <!-- Bootstrap Styles-->
    <link href="../../css/bootstrap/bootstrap.css" rel="stylesheet" />
    <!-- FontAwesome Styles-->
    <link href="../../css/font-awesome.css" rel="stylesheet" />
    <!-- Morris Chart Styles-->

    <!-- Custom Styles-->
    <link href="../../css/custom-styles.css" rel="stylesheet" />
    <!-- Google Fonts-->
    <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css' />
    <!-- TABLE STYLES-->
    <link href="../../js/dataTables/dataTables.bootstrap.css" rel="stylesheet" />
</head>

<body>
<div id="wrapper">
    <nav class="navbar navbar-default top-navbar" role="navigation">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="../teacher/tea_course_index.html">题库与考试</a>
        </div>

        <ul class="nav navbar-top-links navbar-right">

            <li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">
                    <i class="fa fa-user fa-fw"></i> <i class="fa fa-caret-down"></i>
                </a>
                <ul class="dropdown-menu dropdown-user">
                    <li>
                        <a href="../student/stu_person_index.html"><i class="fa fa-user fa-fw"></i> 个人中心</a>
                    </li>
                    <li class="divider"></li>
                    <li>
                        <a href="../../login.html"><i class="fa fa-sign-out fa-fw"></i> 退出登录</a>
                    </li>
                </ul>
                <!-- /.dropdown-user -->
            </li>
            <!-- /.dropdown -->
        </ul>

    </nav>
    <!--/. NAV TOP  -->
    <nav class="navbar-default navbar-side" role="navigation">
        <div class="sidebar-collapse">

            <ul class="nav" id="main-menu">

                <li>
                    <a href="stu_index.html"><i class="fa fa-dashboard"></i> 我的课程</a>
                </li>
                <li>
                    <a href="stu_test_index.html"><i class="fa fa-desktop"></i> 我的考试</a>
                </li>

            </ul>

        </div>

    </nav>
    <!-- /. NAV SIDE  -->
    <div id="page-wrapper">
        <div id="page-inner">
            <div class="container">
            <div class="row">
                <h1 class="page-header">
                        修改个人信息
                </h1>
            </div>
                <div class="row">

                    <div class="well">
                        <ul class="nav nav-tabs">
                            <li class="active">
                                <a href="#message" data-toggle="tab">个人资料</a>
                            </li>
                            <li>
                                <a href="#profile" data-toggle="tab">密码</a>
                            </li>
                        </ul>
                        <div id="myTabContent" class="tab-content">
                            <div class="tab-pane active in" id="message">
                                <form class="form-horizontal" role="form" id="tab1">
                                    <div class="form-group" style="padding-top: 10px">
                                        <!-- 学号 -->
                                        <label for="studentID" class="col-sm-2 control-label">学号</label>
                                        <div class="col-sm-10">
                                            <label>
                                                <input type="text" class="form-control" id="studentID" value="" disabled/>
                                            </label>
                                        </div>
                                        <!-- 姓名 -->
                                        <label for="userName" class="col-sm-2 control-label">姓名</label>
                                        <div class="col-sm-10">
                                            <label>
                                                <input type="text" class="form-control" id="userName" value="" disabled/>
                                            </label>
                                        </div>
                                        <!-- 性别 -->
                                        <label for="sex1" class="col-sm-2 control-label">性别</label>
                                        <div class="col-sm-10">
                                            <!--<input type="radio" class="form-control" id="sex1" value="male" checked>男-->
                                            <!--<input type="radio" class="form-control" id="sex2" value="female" checked>女-->
                                            <div class="radio">
                                                <label>
                                                    <input type="radio" name="sex1" id="sex1" value="1" checked disabled>男
                                                </label>
                                            </div>
                                            <div class="radio">
                                                <label>
                                                    <input type="radio" name="sex1" id="sex2" value="2" checked disabled>女
                                                </label>
                                            </div>
                                        </div>
                                        <!-- 系部 -->
                                        <label for="department" class="col-sm-2 control-label">系部</label>
                                        <div class="col-sm-10">
                                            <label>
                                                <input type="text" class="form-control" id="department" value="" disabled/>
                                            </label>
                                        </div>
                                        <!-- 专业 -->
                                        <label for="major" class="col-sm-2 control-label">专业</label>
                                        <div class="col-sm-10">
                                            <label>
                                                <input type="text" class="form-control" id="major" value="" disabled/>
                                            </label>
                                        </div>
                                        <!-- 班级 -->
                                        <label for="classes" class="col-sm-2 control-label">班级</label>
                                        <div class="col-sm-10">
                                            <label>
                                                <input type="text" class="form-control" id="classes" value="" disabled/>
                                            </label>
                                        </div>

                                        <!-- 手机号 -->
                                        <label for="classes" class="col-sm-2 control-label">手机号</label>
                                        <div class="col-sm-10">
                                            <label>
                                                <input type="text" class="form-control" id="mobile" value="" />
                                            </label>
                                        </div>

                                        <div class="form-group">
                                            <div class="col-sm-offset-2 col-sm-10">
                                                <button class="btn btn-primary" id="editInfo" style="width: 120px">修改</button>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <!-- 输入密码模块输入旧密码匹配通过在进行新的密码的设置,并提示修改成功 -->
                            <div class="tab-pane fade" id="profile">
                                <form class="form-horizontal" role="form" id="tab2">

                                    <div class="form-group">
                                        <label for="password1" class="col-sm-2 control-label">新密码</label>
                                        <div class="col-sm-10">
                                            <input type="password" class="form-control" style="width:20%;margin-top:10px;" id="password1" placeholder="请输入新密码">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="password2" class="col-sm-2 control-label">确认密码</label>
                                        <div class="col-sm-10">
                                            <input type="password" class="form-control" style="width:20%" name="confirmPassword" id="password2" placeholder="请输入新密码">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="col-sm-offset-2 col-sm-10">
                                            <button class="btn btn-primary" id="modifypswd" style="width: 120px" >确定</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- /. PAGE WRAPPER  -->
            <!-- /. WRAPPER  -->
            <!-- JS Scripts-->
            <!-- jQuery Js -->
            <script src="../../js/jquery-1.10.2.js"></script>
            <!-- Bootstrap Js -->
            <script src="../../js/bootstrap.min.js"></script>
            <!-- Metis Menu Js -->
            <script src="../../js/jquery.metisMenu.js"></script>
            <!-- DATA TABLE SCRIPTS -->
            <script src="../../js/dataTables/jquery.dataTables.js"></script>
            <script src="../../js/dataTables/dataTables.bootstrap.js"></script>
            <script src="../../js/jquerysession.js"></script>

            <script>
                $(document).ready(function() {
                    $('#dataTables-example').dataTable();
                    fillInfo();

                    //修改信息事件
                    $("#editInfo").click(function (e) {
                        e.preventDefault();
                        var newInfo = JSON.stringify({"id":$.session.get("userid"), "mobilephone":$("#mobile").val()});
                        $.ajax({
                            type:"post",
                            url:"/user/updateByUserId",
                            data:newInfo,
                            contentType:"application/json",
                            dataType:"json",
                            success:function () {
                                alert("修改成功");
                                fillInfo();
                            },
                            error:function () {
                                alert("修改失败");
                            }
                        });
                    });

                    //修改密码事件
                    $("#modifypswd").click(function(e){
                        e.preventDefault();
                        if(!checkPassword()){
                            alert("两次密码不一致");
                        }
                        else{
                            var newPswd = JSON.stringify({"id":$.session.get("userid"), "password":$("#password2").val()});

                            $.ajax({
                                type:"post",
                                url:"/user/updateByUserId",
                                data:newPswd,
                                contentType:"application/json",
                                dataType:"json",
                                success:function () {
                                    alert("修改成功");
                                    $("#password1").val("");
                                    $("#password2").val("");
                                },
                                error:function () {
                                    alert("修改失败");
                                }
                            });
                        }
                    });

                });
                function fillInfo() {

                    //渲染用户信息
                    $.ajax({
                        type: "get",
                        url: "/user/findByUserId/" + $.session.get("userid"),
                        contentType: "application/json",
                        dataType: "json",
                        success: function (data) {
                            $("#studentID").val(data.data.workid);
                            $("#userName").val(data.data.realname);

                            $("#mobile").val(data.data.mobilephone);
                            $("#sex1").val(data.data.sex);
                            //后端user接口没有包装好的user信息，只有id，所以只能前端再发请求
                            $.get("/class/findClass/" + data.data.classid, function (cdata) {
                                $("#classes").val(cdata.data.name);
                            });
                            $.get("/Department/findById/"+data.data.department,function (ddata) {
                               $("#department").val(ddata.data.name);
                            });
                            $.get("/major/findByPrimaryKey/"+data.data.majorid,function (mdata) {
                                $("#major").val(mdata.data.name);
                            });

                        },
                        error: function () {
                            alert("获取信息失败");
                        }
                    });
                }
                function checkPassword(){

                    return( $("#password1").val()==$("#password2").val() && $("#password1").val()!="");
                }


            </script>
        </div>
    </div>
</div>
</body>

</html>